<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
        <el-input v-model="select_word" size="mini" placeholder="请输入标题关键字" class="handle-input"></el-input>
        <el-button
          type="primary"
          size="mini"
          @click="centerDialogVisible = true"
          >添加歌单</el-button
        >
      </div>
    </div>
  <el-table size="mini" border style="width:100%" height="680px" :data="data" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" ></el-table-column>
      <el-table-column label="歌单图片" width="110" align="center">
          <template slot-scope="scope">
              <div class="songList-img">
                  <img :src="getUrl(scope.row.pic)" style="width:100%">
              </div>
              <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload"
                :on-success="handleAvatorSuccess">
                <el-button size="mini">更新图片</el-button>  
              </el-upload>
          </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="120" align="center"></el-table-column>
      <el-table-column  label="介绍" >
        <template slot-scope="scope">
          <p style="height:100px;overflow:scroll">{{scope.row.introduction}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="style" label="风格" width="120" align="center"></el-table-column>
      <el-table-column  label="歌曲管理" width="110" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" @click="songListEdit(scope.row.id)">歌曲管理</el-button>
        </template>
      </el-table-column>
      <el-table-column label="评论" width="80" align="center">
        <template slot-scope="scope">
            <el-button size="mini" @click="getComment(data[scope.$index].id)">评论</el-button>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="150" align="center" >
        <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
        >
    </el-pagination>
  </div>

    <el-dialog
      title="添加歌单"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="title" label="标题" size="mini">
          <el-input v-model="registerForm.title" placeholder="标题"></el-input>
        </el-form-item>
         <el-form-item  label="介绍" size="mini" prop="introduction">
            <el-input  placeholder="输入介绍" v-model="registerForm.introduction" style="width:100%" type="textarea">
            </el-input>
        </el-form-item>
        <el-form-item prop="style" label="风格" size="mini">
          <el-input v-model="registerForm.style" placeholder="风格"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
          <el-button size="mini" @click="centerDialogVisible=false">取消</el-button>
          <el-button size="mini" @click="addSongList">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑歌单"
      :visible.sync="editVisible"
      width="400px"
      center
    >
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="title" label="标题" size="mini">
          <el-input v-model="editForm.title" placeholder="标题"></el-input>
        </el-form-item>

         <el-form-item  label="介绍" size="mini" prop="introduction">
            <el-input  placeholder="输入介绍" v-model="editForm.introduction" style="width:100%" type="textarea">
            </el-input>
        </el-form-item>
        <el-form-item prop="style" label="风格" size="mini">
          <el-input v-model="editForm.style" placeholder="风格"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
          <el-button size="mini" @click="editVisible=false">取消</el-button>
          <el-button size="mini" @click="updateSongList">确定</el-button>
      </span>
    </el-dialog>

     <el-dialog
      title="删除歌单"
      :visible.sync="deleteVisible"
      width="300px"
      center
    >
     <div align="center">删除了就不能恢复了哦，确定是否删除？</div>
      <span slot="footer">
          <el-button size="mini" @click="deleteVisible=false">取消</el-button>
          <el-button size="mini" @click="deleteRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {queryAllSongList, addSongList, updateSongList, deleteSongList} from '../api/index';
import {mixin} from '../mixins/index';
export default {
  mixins: [mixin],  
  data() {
    return {
      centerDialogVisible: false,//添加歌单弹窗是否显示
      editVisible: false,//编辑歌单弹窗是否显示
      deleteVisible: false,//删除弹窗是否显示
      registerForm: {     //添加框
        name: "",
        introduction: "",
        style: ""
      },
      editForm: {     //编辑框
        id: "",
        name: "",
        introduction: "",
        style: ""
      },
      tableData:[],
      temData:[],
      select_word: '',
      pageSize: 5, //分页大小
      currentPage: 1, //当前页
      idx: -1,  //当前选择项
      mutipleSelection: [] //选择的项
    }
  },
  computed:{
  //计算当前搜索结果表里面的数据
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },
  watch:{
    // 搜索框里面的内容发生变化时，搜索的结果table列表里的内容跟着他的内容发生变化
    select_word: function(){
      if(this.select_word == ''){
        this.tableData = this.temData;
      }else{
        this.tableData=[];
        for(let item of this.temData){
          if(item.title.includes(this.select_word)){
            this.tableData.push(item);
          }
        }
      }
    }
  },
  created(){
      this.getData();
  },
  methods:{
    //获取当前页
    handleCurrentChange(val){
      this.currentPage = val;
    },
    //查询所有歌单
    getData(){
        this.tableData=[];
        this.temData=[];
        queryAllSongList().then(res =>{
            this.tableData =res;
            this.temData =res;
            this.currentPage = 1;

        })
    },

    //   添加歌单
      addSongList(){
       let params = new URLSearchParams();
       params.append('title',this.registerForm.title);
       params.append('pic','/img/songListPic/ashuai.jpeg');
       params.append('introduction',this.registerForm.introduction);
       params.append('style',this.registerForm.style);
        addSongList(params)
        .then(res =>{
            if(res.code==1){
                this.getData();
                this.notify("添加成功","success");
            }else{
                this.notify("添加失败","error");
            }
        })
        .catch(err =>{
            console.log(err);
        });
        this.centerDialogVisible = false;
      },
      // 编辑歌单
      updateSongList(){
       let params = new URLSearchParams();
       params.append('id',this.editForm.id);
       params.append('title',this.editForm.title);
       params.append('introduction',this.editForm.introduction);
       params.append('style',this.editForm.style);
        updateSongList(params)
        .then(res =>{
            if(res.code==1){
                this.getData();
                this.notify("修改成功","success");
            }else{
                this.notify("修改失败","error");
            }
        })
        .catch(err =>{
            console.log(err);
        });
        this.editVisible = false;
      },
      // 弹出编辑页面
      handleEdit(row){
        this.editVisible = true;
        this.editForm ={
          id: row.id,
          title: row.title,
          introduction: row.introduction,
          style: row.style
        }
      },
      // 更新图片
      uploadUrl(id){
        return `${this.$store.state.HOST}/songList/updateSongListPic?id=${id}`
      },
      // 删除一个歌单
      deleteRow(){
        deleteSongList(this.idx)
        .then(res =>{
            if(res){
                this.getData();
                this.notify("删除成功","success");
            }else{
                this.notify("删除失败","error");
            }
        })
        .catch(err =>{
            console.log(err);
        });
        this.deleteVisible = false;
      },
      // 转向歌曲管理页面
      songListEdit(id){
        thi
        this.$router.push({path:`/ListSong`,query:{id}});
      },
      // 转向歌单的评论列表
      getComment(id){
        this.$router.push({path:`/Comment`,query:{id}});

      }
  }
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.songList-img{
    width: 100%;
    height: 80px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>